<template>
<div class='index'>
<van-tabs v-model="channelID">
   <!-- 频道列表 -->
  <van-tab v-for="item in channel"
  :title="item.name"
  :name="item.id"
  :key="item.id">
   <!-- 内容列表 -->
    <article-list :channel="item" @showAction="hshowMoreAction"></article-list>
</van-tab>
</van-tabs>
<!-- 频道按钮  控制频道弹出层的小图标 -->
<div v-if="$store.getters.isLogin" class="bar-btn" @click="showChannelEdit=true">
  <van-icon name="wap-nav"/>
</div>
<!-- 文章--更多操作（弹出层显示/隐藏） -->
<van-popup v-model="showMoreAction" :style="{ width: '80%' }">
  <more-action
   @dislike="hDislike()"
   @reports="hReport"
   ref="refMoreAction"
   ></more-action>
</van-popup>
<!-- 频道选择弹出层 -->
<van-action-sheet v-model="showChannelEdit">
      <channel-edit
      :channels="channel"
      :channelID="channelID"
      @updateCurChannel="hUpdateCurChannel"
      @updateCurIndex="hUpdateCurIndex"
      ></channel-edit>
</van-action-sheet>
</div>
</template>
<script>
// 获取频道daoru
import { getChannels } from '@/api/channel.js'
// 弹出层  不喜欢 和举报文章选项  导入
import { dislikeArticle, reportArticle } from '@/api/articles.js'
// 获取文章列表导入
import ArticleList from './articleList'
// 更多操作 导入
import MoreAction from './moreAction.vue'
// 频道弹出层 使用组件  导入
import ChannelEdit from './channelEdit'
export default {
  components: { ArticleList, MoreAction, ChannelEdit },
  data () {
    return {
      // 要删除的文章ID
      articleID: null,
      channel: [], // 当前订阅的频道
      // 文章id
      channelID: '',
      showMoreAction: false, // 是否显示弹出层
      showChannelEdit: false // 频道列表的弹层
    }
  },
  name: 'page-home',
  created () {
    this.locatChannel()
  },
  methods: {
    // 公共方法  删除文章
    delArticle () {
    // 通过事件总线去发布一个消息，告诉articleList组件，去删除对应的文章
    // 参数是：当前要删除的文章编号 及当前的频道编号
      const eventObj = {
        articleID: this.articleID,
        channelID: this.channel[this.channelID].id
      }
      console.log(eventObj)
      this.$eventBus.$emit('delArticle', eventObj)
    },
    // 处理弹出层中选择的举报文章
    async hReport (reportTypeId) {
      try {
        // console.log(reportTypeId)
      // 1.调用接口
        const result = await reportArticle(this.articleID, reportTypeId)
        console.log(result)
        // 2.关闭弹出层
        this.showMoreAction = false
        // 3.删除文章
        this.delArticle()
        // 弹出提示
        this.$toast.success('操作成功')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    },
    // 接受子组件的自定义事件 弹出层的显示/隐藏
    hshowMoreAction (articleID) {
      this.showMoreAction = true
      this.articleID = articleID
      // console.log(this.$refs.refMoreAction)
      // (1) 在popup没有弹出来之前，MoreAction组件并没有创建
      // 所以 这里需要添加if来判断一下。
      // (2) this.$refs.refMoreAction 就表示了moreAction组件，
      // 我们可以直接去操作它的数据项, 调用它的方法
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
    },
    // 处理用户在弹出层选择的  不感兴趣选项
    async hDislike () {
      try {
        // 1.调用后端接口
        await dislikeArticle(this.articleID)
        // console.log('用户点击了不感兴趣', res)
        // 2.退出弹层
        this.showMoreAction = false
        // // 3.通知文章列表 删除点击的那个文章
        // const obj = {
        //   articleID: this.articleID, // 当前的文章编号
        //   channelID: this.channelID // 当前频道id
        // }
        // 发布事件  删除文章
        this.delArticle()
        // 提示信息
        this.$toast.success('操作成功')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    },
    async locatChannel () {
      const res = await getChannels()
      this.channel = res.data.data.channels
    },
    // 处理点击频道信息  添加频道
    hUpdateCurChannel (channel) {
      // 1.关闭弹层
      this.showChannelEdit = false
      // 2.切换频道列表到当前频道
      this.channelID = channel.id
      console.log(1111)
    },
    // 解决删除我的频道时，出现的小bug
    hUpdateCurIndex (idx) {
      this.activeIndex = idx
    }
  }
}
</script>
 <style lang='less' scoped>
 // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
</style>
